<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>可拖动排序的列表</title>
		<style type="text/css">
			html, body {
  height: 100%;
}

body {
  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/cursor.png") 32 32, auto;
  background: #eeeeee;
  overflow: hidden;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.container {
  position: relative;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 400px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.list-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 90px;
  width: 100%;
}

.item-content {
  height: 100%;
  border: 0px solid rgba(123, 123, 123, 0.49804);
  border-radius: 4px;
  color: #999999;
  line-height: 90px;
  padding-left: 32px;
  font-size: 24px;
  font-weight: 400;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
}

		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/utils/Draggable.min.js"></script>
<section class="container">

  <div class="list-item">
    <div class="item-content">
      <span class="order">1</span> Alpha
    </div>
  </div>

  <div class="list-item">
    <div class="item-content">
      <span class="order">2</span> Bravo
    </div>
  </div>

  <div class="list-item">
    <div class="item-content">
      <span class="order">3</span> Charlie
    </div>
  </div>

  <div class="list-item">
    <div class="item-content">
      <span class="order">4</span> Delta
    </div>
  </div>

</section>
<script type="text/javascript">
	'use strict';
var rowSize = 100;
var container = document.querySelector('.container');
var listItems = Array.from(document.querySelectorAll('.list-item'));
console.log("listItems",listItems);
var sortables = listItems.map(Sortable);
console.log("sortables",sortables);
var total = sortables.length;
TweenLite.to(container, 0.5, { autoAlpha: 1 });
function changeIndex(item, to) {
    arrayMove(sortables, item.index, to);
    if (to === total - 1) {
        container.appendChild(item.element);
    } else {
        var i = item.index > to ? to : to + 1;
        container.insertBefore(item.element, container.children[i]);
    }
    sortables.forEach(function (sortable, index) {
        return sortable.setIndex(index);
    });
}
function Sortable(element, index) {
    var content = element.querySelector('.item-content');
    var order = element.querySelector('.order');
    var animation = TweenLite.to(content, 0.3, {
        boxShadow: 'rgba(0,0,0,0.2) 0px 16px 32px 0px',
        force3D: true,
        scale: 1.1,
        paused: true
    });
    var dragger = new Draggable(element, {
        onDragStart: downAction,
        onRelease: upAction,
        onDrag: dragAction,
        cursor: 'inherit',
        type: 'y'
    });
    var sortable = {
        dragger: dragger,
        element: element,
        index: index,
        setIndex: setIndex
    };
    TweenLite.set(element, { y: index * rowSize });
    function setIndex(index) {
        sortable.index = index;
        order.textContent = index + 1;
        if (!dragger.isDragging)
            layout();
    }
    function downAction() {
        animation.play();
        this.update();
    }
    function dragAction() {
        var index = clamp(Math.round(this.y / rowSize), 0, total - 1);
        if (index !== sortable.index) {
            changeIndex(sortable, index);
        }
    }
    function upAction() {
        animation.reverse();
        layout();
    }
    function layout() {
        TweenLite.to(element, 0.3, { y: sortable.index * rowSize });
    }
    return sortable;
}
function arrayMove(array, from, to) {
    array.splice(to, 0, array.splice(from, 1)[0]);
}
function clamp(value, a, b) {
    return value < a ? a : value > b ? b : value;
}
</script>
	</body>
</html>
